<template>
  <section class="my-runleg">
    <div
      class="choose flex flex-between flex-middle"
      @click="visibleArea = !visibleArea"
    >
      <div class="flex flex-middle">
        <img
          src="/static/images/city-icon.png"
          alt
        />
        <div>
          <div class="adr">{{areaId?areaId.name:'选择城市'}}</div>
          <div class="desc mt10">选择城市</div>
        </div>
      </div>
      <van-icon
        name="arrow"
        class="icon"
        color="#C1C4C9"
      />
    </div>
    <van-action-sheet
      :show="visibleArea"
      @close="visibleArea = false"
    >
      <van-area
        :area-list="areaList"
        @cancel="visibleArea = !visibleArea"
        @confirm="changeCity"
        :columns-num="2"
        title="选择城市"
      />
    </van-action-sheet>
    <van-action-sheet
      :show="visibleArea1"
      @close="visibleArea1 = false"
    >
      <van-area
        :area-list="areaList"
        @cancel="visibleArea1 = !visibleArea1"
        @confirm="changeCity1"
        :columns-num="3"
        title="选择市区"
      />
    </van-action-sheet>
    <div
      class="choose flex flex-between flex-middle"
      @click="chooseSch"
    >
      <div class="flex flex-middle">
        <img
          src="/static/images/school-icon.png"
          alt
        />
        <div>
          <div class="adr">{{school?school.schoolName:'选择学校'}}</div>
          <div class="desc mt10">选择学校</div>
        </div>
      </div>
      <van-icon
        name="arrow"
        class="icon"
        color="#C1C4C9"
      />
    </div>
    <van-action-sheet
      :show="visibleSchool"
      @close="visibleSchool = false"
    >
      <van-picker
        :columns="schoolList"
        value-key="schoolName"
        show-toolbar
        title="选择学校"
        @cancel="visibleSchool = !visibleSchool"
        @confirm="schChange"
      />
    </van-action-sheet>
    <!-- 任务类型 -->
    <div
      class="class flex flex-between flex-middle"
      @click="visibleType = !visibleType"
    >
      <span class="title">任务类型</span>
      <div class="flex flex-middle">
        <span class="value">{{taskTypeId == 1?'跑腿':'签到'}}</span>
        <van-icon
          name="arrow"
          class="icon"
          color="#C1C4C9"
        />
      </div>
    </div>
    <van-action-sheet
      :show="visibleType"
      @close="visibleType = false"
    >
      <van-picker
        :columns="taskTypeList"
        show-toolbar
        title="选择任务类型"
        @cancel="visibleType = !visibleType"
        @confirm="ontaskType"
      />
    </van-action-sheet>
    <!-- 公开电话号码 -->
    <div class="ispublic">
      <div class="flex flex-between flex-middle top">
        <span class="title">是否公开号码</span>
        <div class="flex right">
          <div
            :class="{'active': type == 1}"
            @click="type = 1"
          >公开</div>
          <div
            :class="{'active': type == 2}"
            @click="type = 2"
          >不公开</div>
        </div>
      </div>
      <div
        class="bottom flex flex-middle"
        v-if="type == 1"
      >
        <span>电话号码：</span>
        <input
          type="number"
          v-model="linkTel"
          placeholder-style="color:#C1C4C9"
          placeholder="请输入您的电话号码"
        />
      </div>
    </div>
    <div class="section1">
      <div>
        <van-row>
          <van-col span="8">
            <img
              src="/static/images/errand/icon3.png"
              alt
            />
            <span>任务名称</span>
          </van-col>
          <van-col span="16">
            <input
              type="text"
              :maxlength="15"
              v-model="taskName"
              placeholder-style="color:#C1C4C9"
              placeholder="例：找人送花"
            />
          </van-col>
        </van-row>
      </div>
      <div>
        <van-row>
          <van-col span="8">
            <img
              src="/static/images/errand/icon4.png"
              alt
            />
            <span>任务金额</span>
          </van-col>
          <van-col span="16">
            <input
              type="number"
              v-model="orderAmt"
              class="number"
              placeholder-style="color:#C1C4C9"
              placeholder="金额"
            />
            <text>元</text>
          </van-col>
        </van-row>
      </div>
      <div>
        <van-row>
          <van-col span="8">
            <img
              src="/static/images/errand/icon7.png"
              alt
            />
            <span>联系人</span>
          </van-col>
          <van-col span="16">
            <input
              type="text"
              v-model="linkMan"
              placeholder-style="color:#C1C4C9"
              placeholder="例：张三"
            />
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="place">
      <div>
        <img
          class="icon"
          src="/static/images/errand/icon2.png"
          alt
        />
        <span class="font1">任务地点</span>
      </div>
      <div class="det">
        <div class="font1 flex flex-between flex-middle">
          <input
            v-model="taskDtlAddr"
            placeholder="例：中南财经政法大学北门门卫室"
          />
        </div>
        <div
          class="desc flex flex-between flex-middle"
          @click="handleArea('cityId1')"
        >
          <span>{{cityId1name || '请选择'}}</span>
          <van-icon
            name="arrow"
            color="#C1C4C9"
          />
        </div>
      </div>
    </div>
    <div class="place">
      <div>
        <img
          class="icon"
          src="/static/images/errand/icon1.png"
          alt
        />
        <span class="font1">收货地点</span>
      </div>
      <div class="det">
        <div class="font1 flex flex-between flex-middle">
          <input
            v-model="taskReceiveDtlAddr"
            placeholder="例：中南财经政法大学北门门卫室"
          />
        </div>
        <div
          class="desc flex flex-between flex-middle"
          @click="handleArea('cityId2')"
        >
          <span>{{cityId2name || '请选择'}}</span>
          <van-icon
            name="arrow"
            color="#C1C4C9"
          />
        </div>
      </div>
    </div>
    <div class="section2">
      <div
        class="flex flex-between flex-middle"
        @click="visibleriqi=!visibleriqi"
      >
        <div>
          <img
            src="/static/images/errand/icon6.png"
            alt
          />
          <span class="title">任务日期</span>
        </div>
        <div class="flex flex-middle">
          <span class="value">{{taskDateVal?taskDateVal:'请选择'}}</span>
          <van-icon
            name="arrow"
            class="icon"
            color="#C1C4C9"
          />
        </div>
      </div>
      <van-action-sheet
        :show="visibleriqi"
        @close="visibleriqi = false"
      >
        <van-datetime-picker
          type="date"
          :value="currentDate"
          :min-date="currentDate"
          @confirm="onInputRiqi"
          @cancel="visibleriqi=!visibleriqi"
        />
      </van-action-sheet>
      <div
        class="flex flex-between flex-middle"
        @click="visibleshijian = !visibleshijian"
      >
        <div>
          <img
            src="/static/images/errand/icon5.png"
            alt
          />
          <span class="title">任务时间</span>
        </div>
        <div class="flex flex-middle">
          <span class="value">{{taskBeginTimeVal?taskBeginTimeVal:'请选择开始时间'}}</span>
          <van-icon
            name="arrow"
            class="icon"
            color="#C1C4C9"
          />
        </div>
      </div>
      <van-action-sheet
        :show="visibleshijian"
        @close="visibleshijian = false"
        :z-index="9999"
      >
        <van-datetime-picker
          type="time"
          @confirm="onInputShijian"
          @cancel="visibleshijian=!visibleshijian"
        />
      </van-action-sheet>
    </div>
    <!-- 备注 -->
    <div class="remark">
      <van-row>
        <van-col span="3">
          <span class="font1">备注:</span>
        </van-col>
        <van-col span="21">
          <textarea
            v-if="showTextarea"
            :maxlength="30"
            v-model="taskRemark"
            placeholder="请填写该任务的相关注意事项"
            placeholder-style="font-size: 12px;font-weight: 500;color: rgba(46, 46, 46, 1);"
            class="remark-text"
            auto-focus="true"
            @blur="showTextarea=!showTextarea"
          />
          <div class="remark-text" v-else @click="showTextarea=!showTextarea">{{taskRemark || '请填写该任务的相关注意事项'}}</div>
        </van-col>
      </van-row>
    </div>
    <!-- 参考图片 -->
    <div class="reference">
      <div class="font1">任务参考图片</div>
      <div class="imgs flex">
        <div class="img-wrap" v-for="(item, index) in taskImgs" :key="item">
          <img :src="item" @click="preImg(item)"/>
          <van-icon class="del-btn" name="clear" @click="delImg(index)"/>
        </div>
        <div
          class="upimg flex-col flex-around flex-middle"
          @click="productImgUp"
          v-if="taskImgs.length<3"
        >
          <img src="/static/images/upimg.png" alt />
          <span>{{taskImgs.length}}/3</span>
        </div>
      </div>
    </div>
    <div class="footer">
    <button class="release" @click="issueTaskOrder">发布</button>
    </div>
  </section>
</template>
<script>
import areaList from "../../../common/js/city.js";
import { toDate, toTime } from "../../../common/js/utils.js";
export default {
  data() {
    return {
      areaList,
      showTextarea: false,
      visibleArea: false,
      visibleArea1: false,
      areaId: "", //区域{code,name }
      visibleSchool: false,
      school: "",
      schoolList: "",
      currentDate: new Date().getTime(),
      visibleriqi: false,
      taskDateVal: "",
      visibleshijian: false,
      taskBeginTimeVal: "",
      type: 1,
      taskTypeId: 1,
      taskSchoolId: '',
      taskTypeList: ["跑腿", "签到"],
      visibleType: false,
      taskName: "",
      orderAmt: "",
      linkMan: "",
      linkTel: "",
      taskAreaId: "",
      taskDtlAddr: "",
      taskReceiveAreaId: "",
      taskReceiveDtlAddr: "",
      taskDate: "",
      taskBeginTime: "",
      taskRemark: "",
      taskImgs: [],
      cityType: 1,
      cityId1: '',
      cityId1name: '',
      cityId2: '',
      cityId2name: ''
    };
  },
  methods: {
    routerTo(id) {
      wx.navigateTo({ url: "../runlegdetail/main?id=" + id });
    },
    //发布、
    issueTaskOrder() {
      //   type	1.公开手机号码 2.不公开手机号码	是	[string]
      // 2	taskTypeId	任务类型1：跑腿 2：签到	是	[string]
      // 3	taskName	任务名称	是	[string]
      // 4	orderAmt	任务金额	是	[string]
      // 5	linkMan	联系人	是	[string]
      // 6	linkTel	联系电话		[string]
      // 7	taskAreaId	任务区域	是	[string]
      // 8	taskDtlAddr	任务详细地址	是	[string]
      // 9	taskReceiveAreaId	任务收货区域	是	[string]
      // 10	taskReceiveDtlAddr	任务收货详细地址	是	[string]
      // 11	taskDate	任务日期	是	[string]
      // 12	taskBeginTime	任务起时间	是	[string]
      // 13	taskRemark	任务备注	是	[string]
      // 14	taskImgs	任务参考图片，多图以
      if (this.type == 1 && !(/^1[3456789]\d{9}$/.test(this.linkTel))) {
        wx.showToast({
          title: '电话号码格式不正确',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!(Number(this.orderAmt) > 0)) {
        wx.showToast({
          title: '任务金额不正确',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.taskName.trim()) {
        wx.showToast({
          title: '任务名称不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.linkMan.trim()) {
        wx.showToast({
          title: '联系人不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.cityId1.code) {
        wx.showToast({
          title: '任务区域不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.cityId2.code) {
        wx.showToast({
          title: '收货地址不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      if (!this.taskSchoolId) {
        wx.showToast({
          title: '学校不能为空',
          icon: 'none',
          duration: 2000,
          mask: false,
        });
        return;
      }
      let params = {
        type: this.type,
        taskTypeId: this.taskTypeId,
        taskName: this.taskName,
        taskSchoolId: this.taskSchoolId,
        orderAmt: this.orderAmt,
        linkMan: this.linkMan,
        linkTel: this.linkTel,
        taskAreaId: this.cityId1.code,
        taskDtlAddr: this.taskDtlAddr,
        taskReceiveAreaId: this.cityId2.code,
        taskReceiveDtlAddr: this.taskReceiveDtlAddr,
        taskDate: this.taskDate,
        taskBeginTime: this.taskBeginTime,
        taskRemark: this.taskRemark,
        taskImgs: this.taskImgs.toString()
      };
      this.$api.issueTaskOrder(params).then(res => {
        if (res.msg == "成功") {
          wx.showToast({
            title: "发布成功", //提示的内容,
            icon: "success", //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                wx.navigateBack({
                  delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
              }, 1500);
            }
          });
        }
      });
    },
    handleArea(type) {
      this.cityType = type;
      this.$nextTick(() => {
        this.visibleArea1 = !this.visibleArea1;
      })
    },
    preImg(url) {
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: this.taskImgs // 需要预览的图片http链接列表
      })
    },
    delImg(index) {
      this.taskImgs.splice(index, 1);
    },
    //多图上传
    productImgUp() {
      var _this = this;
      wx.showLoading({
        title: '加载中',
      });
      wx.chooseImage({
        count: 1,
        success(res) {
          let path = res.tempFilePaths[0];
          let FSM = wx.getFileSystemManager();
          let base64Str = FSM.readFileSync(path, "base64");
          let imgType = res.tempFilePaths[0].substring(
            res.tempFilePaths[0].lastIndexOf(".")
          );
          _this.uploadImg(base64Str, imgType).then(res => {
            if (_this.taskImgs.length < 3) {
              _this.taskImgs = _this.taskImgs.concat(res.data.imgUrl);
            }
          });
        },
        complete() {
          wx.hideLoading();
        }
      });
    },
    //图片上传公共接口
    uploadImg(base64Str, imgType) {
      return new Promise((resolve, reject) => {
        this.$api.uploadImg({ base64Str, imgType }).then(res => {
          resolve(res);
        });
      });
    },
    //任务日期
    onInputRiqi(e) {
      this.taskDate = e.mp.detail;
      this.taskDateVal = toTime(e.mp.detail, "Y-M-D");
      this.visibleriqi = !this.visibleriqi;
    },
    //任务时间
    onInputShijian(e) {
      this.taskBeginTime = e.mp.detail;
      this.taskBeginTimeVal = e.mp.detail; //toTime(e.mp.detail,'h:s');
      this.visibleshijian = !this.visibleshijian;
    },
    //任务类型
    ontaskType(e) {
      this.taskTypeId = e.mp.detail.index + 1;
      this.visibleType = !this.visibleType;
    },
    chooseSch() {
      if (!this.areaId) {
        wx.showToast({
          title: '请先选择城市', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
      } else {
        this.visibleSchool = !this.visibleSchool;
      }
    }, //选择学校确认
    schChange(e) {
      this.school = e.target.value;
      this.taskSchoolId = e.target.value.schoolId;
      this.$setStorage('schoolInfo', e.target.value);
      this.visibleSchool = !this.visibleSchool;
    },
    changeCity(e) {
      this.areaId = e.target.values[1];
      this.$setStorage('jobCity', e.target.values[1]);
      this.getSchoolListByArea();
      this.visibleArea = !this.visibleArea;
    },
    changeCity1(e) {
      this[this.cityType] = e.target.values[2];
      this[this.cityType + 'name'] =
        e.target.values[0].name +
        e.target.values[1].name + e.target.values[2].name;
      this.visibleArea1 = !this.visibleArea1;
    },
    //区域选择学校列表
    getSchoolListByArea() {
      this.$api.getSchoolListByArea({ areaId: this.areaId.code }).then(res => {
        const schoolInfo = this.$getStorage('schoolInfo');
        this.school = schoolInfo;
        this.taskSchoolId = schoolInfo.schoolId;
        this.schoolList = res.data.schoolList;
      });
    }
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    const jobCity = this.$getStorage('jobCity');
    if (jobCity) {
      this.areaId = jobCity;
      this.$nextTick(() => {
        this.getSchoolListByArea();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-runleg {
  .choose {
    margin: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    img {
      width: 36px;
      height: 36px;
      margin-right: 15px;
    }
    .icon {
      width: 9px;
      height: 15px;
    }
    .adr {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
  }
  .class {
    margin: 15px;
    padding: 20px 10px;
    background: white;
    &:not(:last-child) {
      border-bottom: 1px solid #f2f2f2;
    }
    img {
      width: 14px;
      height: 14px;
      background: #f7f7f7;
      margin-right: 6px;
      vertical-align: middle;
    }
    .title {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .value {
      font-size: 11px;
      line-height: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
      margin-right: 15px;
      vertical-align: middle;
    }
  }
  .ispublic {
    margin: 15px;
    background: white;
    padding: 0 10px;
    .top {
      padding: 15px 0;
      border-bottom: 1px solid #f4f5fb;
      .title {
        font-size: 15px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        line-height: 14px;
      }
      .right {
        border: 0.5px solid rgba(38, 176, 255, 1);
        border-radius: 2px;
        font-size: 10px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        div {
          height: 26px;
          width: 50px;
          line-height: 26px;
          text-align: center;
        }
        .active {
          background: #26b0ff;
          color: white;
        }
      }
    }
    .bottom {
      padding: 15px 0;
    }
  }
  .section1 {
    margin: 15px;
    background: white;
    padding: 0 10px;
    & > div {
      padding: 15px 0;
      img {
        width: 14px;
        height: 14px;
        background: #f7f7f7;
        vertical-align: baseline;
        margin-right: 6px;
      }
      span {
        vertical-align: baseline;
      }
      .number {
        width: 40px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    & > div:not(:last-child) {
      border-bottom: 1px solid #f2f2f2;
    }
  }
  .place {
    margin: 15px;
    .font1 {
      margin-left: 6px;
    }
    input {
      width: 300px;
    }
    .det {
      margin-top: 8px;
      padding: 20px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      .font1 {
        margin-left: 0;
      }
      .desc {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        line-height: 13px;
        margin-top: 20px;
      }
    }
  }
  .section2 {
    margin: 15px;
    padding: 0 10px;
    background: white;
    & > div {
      padding: 15px 0;
    }
    & > div:not(:last-child) {
      border-bottom: 1px solid #f2f2f2;
    }
    img {
      width: 14px;
      height: 14px;
      background: #f7f7f7;
      margin-right: 6px;
      vertical-align: middle;
    }
    .title {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .value {
      font-size: 11px;
      line-height: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
      margin-right: 15px;
      vertical-align: middle;
    }
  }
  .remark {
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin: 15px;
    padding: 20px 10px;
    .font1 {
      font-size: 13px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .remark-text {
      width: 100%;
      height: 36px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height:13px;
      display:block
    }
  }
  .reference {
    padding: 15px 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin: 15px;
    .font1 {
      margin-bottom: 15px;
    }
    .imgs {
      .img-wrap {
        position: relative;
        img {
          width: 60px;
          height: 60px;
          border-radius: 1px;
          &:not(:last-child) {
            margin-right: 9px;
          }
        }
        .del-btn {
          font-size: 15px;
          color: $secondary;
          position: absolute;
          right: 0px;
          top: -10px;
        }
      }
      .upimg {
        width: 60px;
        height: 60px;
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        line-height: 18px;
        border: 1px solid rgba(193, 196, 201, 1);
        border-radius: 1px;
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .footer {
    background: #f7f7f7;
    margin-bottom: 15px;
    .release {
      width: 345px;
      background: rgba(59, 184, 253, 1);
      color: white;
      border-radius: 5px;
      padding: 0;
      text-align: center;
      margin: 0 auto 15px;
    }
  }
  .desc {
    font-size: 12px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(193, 196, 201, 1);
  }
  .icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
}

.text-tips {
  line-height: 12px;
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
.van-icon {
  vertical-align: middle;
}
</style>